<template>
  <div style="position: absolute;left:10%;top:26%;">
    <img style="width:600px;height:500px;" src="./img/aa.png"/>
  </div>
  <div class="box-login">
    <h1 style="color: white; margin-left: 40px; margin-top: 50px">
      登录七尾客服云
    </h1>
    <p style="color: white; margin-left: 40px; margin-top: 10px">
      提示：账号密码随意输入即可
    </p>
    <van-field
      style="
        width: 410px;
        height: 50px;
        margin-left: 40px;
        margin-top: 30px;
        padding-left: 10px;
        font-size: 17px;
      "
      v-model="username"
      placeholder="请输入账号"
      label="账号"
    />
    <van-field
      v-model="password"
      style="
        width: 410px;
        height: 50px;
        margin-left: 40px;
        margin-top: 20px;
        padding-left: 10px;
        font-size: 17px;
      "
      type="password"
      label="密码"
      placeholder="请输入密码"
    />
    <p style="margin-left: 270px; margin-top: 10px; color: white">
      忘记密码请联系客服人员
    </p>
    <button
      style="
        width: 410px;
        height: 50px;
        margin-left: 40px;
        margin-top: 40px;
        background-color: rgb(255, 145, 56);
        border: 1px solid rgb(255, 145, 56);
        color: white;
        font-size: 18px;
      "
      @click="Login"
      :plain="true"
    >
      登录
    </button>
    <p
      @click="$router.push('/register')"
      style="text-align: center; margin-top: 20px; color: white"
    >
      没有账号，现在去注册
    </p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import api from "./api";
import { ElMessage } from "element-plus";

const username = ref("");
const password = ref("");

const Login = async () => {
  if (!username.value || !password.value) {
    return ElMessage.error("请输入账号和密码");
  }

  try {
    const res = await api.post("/login", {
      username: username.value,
      password: password.value,
    });

    localStorage.setItem("accessToken", res.data.accessToken);
    localStorage.setItem("refreshToken", res.data.refreshToken);

    ElMessage.success("登录成功");
    setTimeout(() => {
      window.location.href = "/index/home";
    }, 1500);
  } catch (err) {
    ElMessage.error(err.response?.data?.msg || "登录失败，请稍后重试");
  }
};
</script>

<style>
body {
  background-color: rgb(215, 226, 241);
}
.box-login {
  width: 500px;
  height: 500px;
  background-color: rgb(0, 110, 255);
  position: absolute;
  left: 60%;
  top: 25%;
}
</style>
